<template>
    <div class="form">
        <h1>账号注册</h1>
        <el-form ref="form" :model="form" style="width: 700px;" label-width="80px" :rules="rules">
            <el-form-item label="账号" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input v-model="form.pwd" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="pwd2">
                <el-input v-model="form.pwd2" show-password></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" ></el-input>
            </el-form-item>       
            <el-form>
                <el-button type="primary" @click="submit">确认注册</el-button>
                <el-button type="primary">重置</el-button>
            </el-form>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    name:'',
                    pwd:'',
                    pwd2:'',
                    phone:'',
                },
                rules:{
                    name:[
                        {  required:true,message:"必填项",trigger:'blur'},
                        {  min:6,max:12,message:"名字长度在6~12字符中间",trigger:'blur'}
                    ],
                    pwd:[
                        {  required:true,message:"必填项",trigger:'blur'},
                        {  min:8,max:12,message:"密码长度在8~12字符之间",trigger:'blur'}
                    ],
                    pwd2:[
                        {  required:true,message:"必填项",trigger:'blur'},
                        {  min:8,max:12,message:"密码长度在8~12字符之间",trigger:'blur'},
                        {
                            validator: (rule,value,cb) => {
                            if (this.form.pwd == this.form.pwd2){
                                cb();
                            } else {
                                cb(new Error("两次密码不一致"));
                            }
                        },
                        trigger:'blur',},
                    ],
                    phone:[
                        {  required:true,message:"必填项",trigger:'blur'},
                        {  pattern:/^1[3-9]\d{9}$/,message:"手机号码格式不正确",trigger:'blur'} 
                    ],

                        },
            }
        },
        methods: {
            // 提交表单按钮执行
            submit() {
                //调用表单对象的validate方法做表单自检
                // this.$refs[表单的ref属性值]
                this.$refs['form'].validate((valid)=>{
                    if(valid){
                        console.log("通过验证，可以提交表单",this.form);
                    }else{
                        console.warn("验证失败，阻止表单提交");
                    }
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
.form{
    display: flex;
    flex-direction: column;
}
</style>